<template>
  <div class="app-wrap">
    <div class="file-wrap">
      <Checkbox class="mar2t" v-model="isMultiFile"> </Checkbox>
      <template v-if="isMultiFile">
        <span class="file-box">
          请批量选择文件：
          <input
            type="file"
            multiple="multiple"
            ref="multiFile"
            @change="handleFileChange('multi')"
            @click="handleFileClick('multi')"
          />
        </span>
        <Poptip
          transfer
          placement="bottom"
          trigger="hover"
          v-if="multiNames.length > 0"
        >
          <Icon class="pointer" size="24" type="md-alert" />
          <div slot="content">
            <p v-for="(name, index) in multiNames" :key="'name_' + index">
              {{ name }}
            </p>
          </div>
        </Poptip>
      </template>
      <template v-else>
        <span class="file-box"
          >大群文件：<input
            type="file"
            id="baseFile"
            name="baseFile"
            ref="baseFile"
            @click="handleFileClick('base')"
            @change="handleFileChange('base')"
        /></span>
        <span class="file-box mar10t"
          >小群文档：<input
            type="file"
            id="smallGroupFile"
            name="smallGroupFile"
            ref="smallGroupFile"
            @click="handleFileClick('small')"
            @change="handleFileChange('small')"
        /></span>
        <span class="file-box mar10t"
          >补丁文件：<input
            type="file"
            id="patchFile"
            name="patchFile"
            ref="patchFile"
            @click="handleFileClick('patch')"
            @change="handleFileChange('patch')"
        /></span>
      </template>
    </div>
    <Tabs class="tabs mar10t" type="card" :animated="false" v-model="selectTab">
      <TabPane label="基础" name="base">
        <BaseBox v-show="selectTab === 'base'"></BaseBox>
      </TabPane>
      <TabPane label="复盘" name="replay">
        <Replay v-show="selectTab === 'replay'"></Replay>
      </TabPane>
      <TabPane label="打卡" name="clockin">
        <ClockIn v-show="selectTab === 'clockin'"></ClockIn>
      </TabPane>
      <TabPane label="分析" name="analy">
        <Analy v-show="selectTab === 'analy'"></Analy>
      </TabPane>
      <TabPane label="人员" name="members">
        <Members v-show="selectTab === 'members'"></Members>
      </TabPane>
      <div slot="extra">
        <Tooltip class="inline middle mar10r mar4t" content="计数统计">
          <a @click="isShowModalCount = true">C</a>
        </Tooltip>
        <a
          class="tag-website-link"
          target="_blank"
          href="https://gitee.com/carlleton/swork"
        >
          <img
            src="https://gitee.com/static/images/logo-black.svg?t=158106666"
          />
        </a>
      </div>
    </Tabs>
    <ModalCount
      v-if="isShowModalCount"
      @close="isShowModalCount = false"
    ></ModalCount>
  </div>
</template>

<script>
// @ is an alias to /src
import BaseBox from "./BaseBox.vue";
import Replay from "./Replay.vue";
import Members from "./Members.vue";
import ClockIn from "./ClockIn.vue";
import Analy from "./Analy.vue";
import ModalCount from "@/components/ModalCount.vue";
import { readFileText } from "js/utils.js";
export default {
  name: "Home",
  data() {
    return {
      selectTab: "base",
      isMultiFile: true,
      filesObj: {
        base: "",
        small: "",
        patch: "",
        multi: "",
      },
      multiNames: [],
      isShowModalCount: false, // 计数统计
    };
  },
  mounted() {
    this.$global.log = this.log;
    this.$global.getFileText = this.getFileText;
  },
  methods: {
    log(str) {
      this.$Message.error(str);
    },
    async handleFileChange(tag) {
      let text = await this.getFileStr(tag);
      this.filesObj[tag] = text;
    },
    handleFileClick(tag) {
      let fileObj = {
        base: this.$refs.baseFile,
        small: this.$refs.smallGroupFile,
        patch: this.$refs.patchFile,
        multi: this.$refs.multiFile,
      };
      let file = fileObj[tag];
      file.value = "";
    },
    async getFileStr(tag) {
      let fileObj = {
        base: this.$refs.baseFile,
        small: this.$refs.smallGroupFile,
        patch: this.$refs.patchFile,
        multi: this.$refs.multiFile,
      };
      let file = fileObj[tag];
      if (tag === "multi") {
        let files = file.files;
        let names = [];
        for (let i = 0, n = files.length; i < n; i++) {
          let file2 = files[i];
          names.push(file2.name);
        }
        this.multiNames = names;
      }
      let text = await readFileText(file);
      return text;
    },
    async getFileText(tag) {
      if (this.isMultiFile) {
        return this.filesObj["multi"];
      }
      let text = this.filesObj[tag];
      let text2 = this.filesObj["patch"] || "";
      return text + text2;
    },
  },
  components: {
    BaseBox,
    Replay,
    Members,
    ClockIn,
    Analy,
    ModalCount,
  },
};
</script>
<style lang="less">
@import "../assets/css/index.less";
</style>
